<template>
	<view class="container evaluate-wrap">
		<view class="productDiv" v-for="(item,index) in productObj" :key='index' v-if="type=='0'&&item.isSample === 0">
			<view class="product">
				<image class="img" :src="imgSrc +item.productThumbnailImageUrl"></image>
				<view class="title">{{item.productName}}</view>
			</view>
			<view class="evalute-row">
				<text class="label">描述相符</text>
				<text v-for="(sItem, sIndex) in 5" :key="sIndex" class="iconfont" :class="item.descRating > sIndex?'iconpingjiaxingxing':'iconpingjia'"
				 @click="checkStar(sIndex,'1',index)"></text>
			</view>
		</view>
		
		<view class="textarea-wrap">
			<view class="addevaluateClass" v-if="type=='1'">
				追加评价
			</view>
			<textarea maxlength="100" v-if="type=='1'" v-model="content" placeholder="亲，有什么需要追加评价的吗？" placeholder-style="color:#999" />
			<textarea maxlength="100" v-if="type=='0'" v-model="content" placeholder="宝贝满足你的期待吗？说说他的优点和美中不足的地方吧" placeholder-style="color:#999" />
			</view>
		<view class="upload-wrap">
			<view class="refundInfo" style="margin-top: 0rpx;">
				<tui-upload
					class="upload-wrap"
					:useType="'video'"
					:limit="limit"
					:value="imgArr"
					@complete="getImgResult($event, 'img3')"
					@remove="removeImg($event, 'img3')"
				></tui-upload>
			</view>
		</view>
		<view class="shop"  v-if="type=='0'">
			<i class="iconfont icondianpu"></i>
			<text>店铺评分</text>
		</view>
		<view class="evalute-row" v-if="type=='0'">
			<text class="label">物流服务</text>
			<text
				v-for="(sItem, sIndex) in 5"
				:key="sIndex"
				class="iconfont"
				:class="logisticsRating > sIndex?'iconpingjiaxingxing':'iconpingjia'"
				@click="checkStar(sIndex, '2')"
			></text>
		</view>
		<view class="evalute-row padding-b"  v-if="type=='0'">
			<text class="label">服务态度</text>
			<text
				v-for="(sItem, sIndex) in 5"
				:key="sIndex"
				class="iconfont"
				:class="attitudeRating > sIndex?'iconpingjiaxingxing':'iconpingjia'"
				@click="checkStar(sIndex,'3')"
			></text>
		</view>
		<view class="bot-btn-wrap fix-bot bg-none">
			<!-- <mix-button ref="confirmBtn" text="提交" @onConfirm="confirm"></mix-button> -->
			<!-- <view @tap="confirm" class="mix-btn-content" >
				<text class="mix-text">提交</text>
			</view> -->
			<button class="row mix-btn-content" :disabled="onClickFlg" @tap="confirm">提交</button>
		</view>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiUpload from '@/components/tui-upload/tui-upload';
	import mixButton from '@/components/mix-button/mix-button.vue'
	export default {
		components: {
			tuiUpload,
			mixButton
		},
		data() {
			return {
				imgSrc: this.$store.state.imgUrl,
				limit: 3,
				imgArr: [],
				descRating:5,
				logisticsRating:0,
				attitudeRating:0,
				content:'',
				images:[],
				productObj:[],
				orderId:'',
				evaluationUrl1:'',
				evaluationUrl2:'',
				evaluationUrl3:'',
				type:'0',
				status:0,
				onClickFlg:false
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			if(options.order){
				// var order=options.order
				// console.log(options.order)
				// this.productObj=options.productInfo
				// this.productObj.forEach((item)=>{
				// 	item.descRating=0
				// })
				this.orderId=options.order
			}
			this.type=options.type
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				this.isLoading = true;
				const params = {
					orderId: this.orderId
				};
			
				this.$http.getOrderDetail(params).then(res => {
					if (res.status == 0) {
						let info=res.data.productInfo;
						console.log(info)
						info.forEach((item)=>{
							this.productObj.push({
								productId:item.productId,
								productName:item.productName,
								specificationName:item.specificationName,
								productThumbnailImageUrl:item.productThumbnailImageUrl,
								isSample:item.isSample,
								descRating:0,
							})
						})
					}
				});
			},
			getImgResult: function(e, type) {
				console.log(e);
				// if (e.status == 2) {
				// 	this.uploadImg = true;
				// } else if (e.status == 1) {
				// 	this.uploadImg = false;
				// }
				// if(e.status==2){
					this.status=e.status
				// }
				if (e.imgArr.length === 1) {
					this.evaluationUrl1 = e.imgArr[0];
				} else if (e.imgArr.length === 2) {
					this.evaluationUrl1 = e.imgArr[0];
					this.evaluationUrl2 = e.imgArr[1];
				} else if (e.imgArr.length === 3) {
					this.evaluationUrl1 = e.imgArr[0];
					this.evaluationUrl2 = e.imgArr[1];
					this.evaluationUrl3 = e.imgArr[2];
				}
			},
			removeImg: function(e) {
				//移除图片
				console.log(e);
				if (e.index === 0) {
					this.evaluationUrl1 = '';
				} else if (e.index === 1) {
					this.evaluationUrl2 = '';
				} else if (e.index === 2) {
					this.evaluationUrl3 = '';
				}
			},
			dateFun(){
				var d=new Date();
				  var year=d.getFullYear();
				  var month=change(d.getMonth()+1);
				  var day=change(d.getDate());
				  var hour=change(d.getHours());
				  var minute=change(d.getMinutes());
				  var second=change(d.getSeconds());
				  function change(t){
				    if(t<10){
				     return "0"+t;
				    }else{
				     return t;
				    }
				  }
				  var time=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
				  return time
			},
			confirm(){
				console.log(this.dateFun())
				let productInfo=[]
				let productFlg=false
				this.productObj.forEach((item)=>{
					if(item.isSample==0){
						productInfo.push({
							productId:item.productId,
							productName:item.productName,
							specificationName:item.specificationName,
							descriptionMatchPoint:item.descRating,
						})
					}
					
					if(this.type==='0'){
						if(item.descRating<=0&&item.isSample===0){
							
							productFlg=true
						}
					}
					
				})
				if(productFlg){
					uni.showToast({
						title: '请对商品进行评价',
						icon:'none',
					})
					return
				}
				if(this.status==2){
					uni.showToast({
						title: '还有上传中的图片和视频，请稍等',
						icon:'none',
					})
					return
				}
				if(this.type==='0'){
					if(this.attitudeRating<=0){
						uni.showToast({
							title: '请对店铺服务进行评价',
							icon:'none',
						})
						return
					}
					if(this.logisticsRating<=0){
						uni.showToast({
							title: '请对物流进行评价',
							icon:'none',
						})
						return
					}
				}
				this.onClickFlg=true
				if(this.type==='0'){
					let params={
						orderId:this.orderId,
						evaluateDate:this.dateFun(),
						evaluationText:this.content|| '买家未填写评价内容',
						evaluationUrl1:this.evaluationUrl1,
						evaluationUrl2:this.evaluationUrl2,
						evaluationUrl3:this.evaluationUrl3,
						logisticsServicePoint:this.logisticsRating,
						serviceQualityPoint:this.attitudeRating,
						productInfo:productInfo
					}
					var that = this
					this.$http.evaluationCreate(params).then((res) => {
						if(res.status === 0) {
							that.$eventHub.$emit('orderRefresh');
							uni.showToast({
								title: '评价成功',
								icon:'none',
							})
							setTimeout(()=>{
								uni.navigateBack();
								this.onClickFlg = false
							}, 500)
						}else{
							this.onClickFlg = false
						}
					})
				}else{
					let params={
						orderId:this.orderId,
						addCommentDate:this.dateFun(),
						addComment:this.content|| '买家未填写评价内容',
						addEvaluationUrl1:this.evaluationUrl1,
						addEvaluationUrl2:this.evaluationUrl2,
						addEvaluationUrl3:this.evaluationUrl3,
					}
					var that = this
					this.$http.evaluationAddComment(params).then((res) => {
						if(res.status === 0) {
							that.$eventHub.$emit('orderRefresh');
							uni.showToast({
								title: '追加评价成功',
								icon:'none',
							})
							setTimeout(()=>{
								uni.navigateBack();
								this.onClickFlg = false
							}, 500)
						}else{
							this.onClickFlg = false
						}
					})
				}
				
				
			},
			checkStar(current,type,index){
				if(type==='1'){
					this.productObj[index].descRating = current + 1;
				}else if(type==='2'){
					this.logisticsRating = current + 1;
				}else if(type==='3'){
					this.attitudeRating = current + 1;
				}
				
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.bot-btn-wrap{
		background-color: #fff;
	}
	.evaluate-wrap{
		border-top: 2rpx solid $borderColor;
		width: 100%;
		min-height: 100vh;
		.product,.evalute-row,.shop{
			width: 100%;
			padding: 10rpx 30rpx;
			background-color: #fff;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
		.evalute-row{
			border-bottom: 2rpx solid $borderColor;
		}
		.productDiv{
			
			
		}
		.product{
			.img{
				width: 80rpx;
				height: 80rpx;
				background-color: #f5f5f5;
				margin-right:10rpx;
			}
			.title{
				color: #333;
			}
		}
		.evalute-row{
			height: 76rpx;
			text{display: inline-block;}
			.label{
				margin-right:20rpx;
			}
			.iconfont{
				margin-right: 6rpx;
				font-size: 36rpx;
				
			}
			.iconpingjia{
				color: #ccc;
			}
			.iconpingjiaxingxing{
				color: #f0a80e;
				margin-top:-8rpx
			}
		}
		.padding-b{
			// padding-bottom: 30rpx;
			margin-bottom: 200rpx;
		}
		.textarea-wrap{
			padding:20rpx 30rpx;
			background-color: #fff;
			border-top: 2rpx solid $borderColor;
			textarea{
				width: 100%;
				height: 200rpx;
				font-size: 24rpx;
				color: #333;
				line-height: 38rpx;
			}
		}
		.upload-wrap{
			padding: 0rpx 30rpx 20rpx;
			background-color: #fff;
			/deep/ {
				.upload-content{
					background-color: #fff;
				}
				.upload-item{
					width: 144rpx;
					height: 144rpx;
				}
				.upload-add-btn{
					width: 144rpx;
					height: 144rpx;
				}
			}
		}
		.shop{
			line-height: 60rpx;
			border-bottom: 2rpx solid $borderColor;
			margin-top:20rpx;
			.iconfont{
				margin-right: 14rpx;
				font-size:36rpx;
			}
		}
		
	}
	.btnRegister {
		margin-top: 50rpx;
		font-size: 38rpx;
		text-align: center;
		height: 100rpx;
		display: flex;
		justify-content: center;
		color: #fff;
		background: -webkit-linear-gradient(299deg, #F69E97 0%, #EA655E 100%);
		background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
		box-shadow: 0px 4rpx 40rpx 0px rgba(83, 0, 0, 0.24);
		border-radius: 50rpx;
	}
	.mix-btn-content{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 610rpx;
		height: 88rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fff;
		border-radius: 100rpx;
		background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
		box-shadow: 0px 4rpx 20rpx 0px rgba(83, 0, 0, 0.24);
		position: relative;
		&.disabled{
			color: #fff;
		}
		.mix-text{
			position: relative;
			z-index: 1;
		}
	}
	.addevaluateClass{
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
</style>
